<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link href="/static/layui/css/layui.css" rel="stylesheet">

    <link href="/static/css/left.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/chosen/chosen.css">

    <style>
        body{
            background-color: #fafafa;
        }

        .right_content{
            width: 1010px;
            background-color: #ffff;
            padding: 2%;
            min-height: 600px;
        }
        .c_cur{
            padding: 1% 0px;
            font-weight: bold;
        }
        .title_content span{
            font-size: 20px;
            font-weight: 600;
        }
        .layui-btn{
            background-color: #276040 !important;
        }
        input.layui-input:hover{
            border: 1px solid #276040 !important;
        }
        input.layui-input:focus{
            border: 1px solid #276040 !important;
        }
        .type_content div div em{
            color: red;
        }
        .submit_d{
            display: ruby-text;
        }
        #availableTime{
            width: 30%;
        }
        #upload-demo-preview{
            display: flex;
            flex-wrap: wrap;
        }
        #upload-demo-preview img {

            width: 150px !important;
            height: 150px !important;
        }
        blockquote{
            border: 1px solid #ffffff !important;
        }
        #layui-upload-file{
            display: none;
        }
        .layui-upload-file{
            padding: 0% !important;
        }
        .layui-elem-quote{
            padding: 0% !important;
        }

        .chosen-container-active .chosen-choices {
            border: 1px solid #276040 !important;
        }
        .chosen-container .chosen-results li.highlighted {
            background-color: #276040 !important;
            background-image: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #276040), color-stop(90%, #276040)) !important;
            background-image: linear-gradient(#276040 20%, #276040 90%) !important;
            color: #fff;
        }
        .chosen-container-multi .chosen-choices {
            height: 35px !important;
            padding: 3px 5px !important;
        }

        .image-container {
            position: relative; /* 允许使用绝对定位 */
            width: 150px; /* 或其他你需要的宽度 */
            height: 0; /* 根据图片或内容设置 */
            padding-bottom: 16%; /* 保持宽高比，这里以16:9为例 */
            overflow: hidden;
            margin: 0px 6px;
        }

        .image-container img {
            width: 150px;
            height: auto;
        }



        .mask {
            position: absolute;
            top: 5px;
            left: 123px;
            width: 20px;
            height: 20px;
            background-color: rgba(0, 0, 0, 0.5);
            cursor: pointer;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: 500;
            color: #fff;
            line-height: 0px;
            font-size: 18px;

        }



    </style>

</head>
<body>

   <div th:replace="/navigation_bar/top :: headerFragment"></div>
    <div class="content" style="max-width: 1220px; display: flex;margin: 0 auto;padding: 2% 0;justify-content: space-between;">

        <div th:replace="/navigation_bar/left :: left_layout"></div>
        <div class="right_content">
            <div class="title_content"><span>新建产品</span></div>
            <div class="type_content">
                <div>
                    <div class="c_cur">
                        产品名称<em>*</em>
                    </div>
                    <div class="c_cur">
                        <input type="text" name="" placeholder="产品名称" class="layui-input">
                    </div>

                    <div class="c_cur">
                        产品图片<em>*</em>
                    </div>
                    <div >
                        <!--<button type="button" class="layui-btn" id="ID-upload-demo-btn">
                            <i class="layui-icon layui-icon-upload"></i> 单图片上传
                        </button>
                        <div style="width: 132px;">
                            <div class="layui-upload-list">
                                <img class="layui-upload-img" id="ID-upload-demo-img" style="width: 100%; height: 92px;">
                                <div id="ID-upload-demo-text"></div>
                            </div>
                            <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="filter-demo">
                                <div class="layui-progress-bar" lay-percent=""></div>
                            </div>
                        </div>
                        <hr style="margin: 21px 0;">-->
                        <div class="layui-upload">
                            <button type="button" class="layui-btn" id="ID-upload-demo-btn-2" style="display: none">
                                <i class="layui-icon layui-icon-upload"></i> 多图片上传
                            </button>
                            <blockquote class="layui-elem-quote layui-quote-nm" style="">
                                <div class="layui-upload-list" id="upload-demo-preview">
                                    <div class="image-container" id="upload_img">
                                        <img src="/static/img/upload.png" >
                                        <div style="display: none" class="mask"><span>x</span></div>
                                    </div>

                                </div>
                            </blockquote>
                        </div>
                    </div>

                    <div class="c_cur">
                        客户名称<em>*</em>
                    </div>
                    <div class="c_cur">
                        <input type="text" name="" placeholder="客户名称" class="layui-input">
                    </div>

                    <div class="c_cur">
                        产品品类<em>*</em>
                    </div>
                    <div class="c_cur">
                        <select data-placeholder="产品品类" class="chosen-select" tabindex="2" multiple>
                            <option value=""></option>
                            <option value="服饰鞋帽">服饰鞋帽</option>
                            <option value="医疗/保健/个护">医疗/保健/个护</option>
                            <option value="工艺品">工艺品</option>
                            <option value="电子产品">电子产品</option>
                            <option value="家用电器">家用电器</option>
                            <option value="家居百货/厨房用品">家居百货/厨房用品</option>
                            <option value="户外/运动">户外/运动</option>
                        </select>
                    </div>

                    <div class="c_cur">
                        上市时间<em>*</em>
                    </div>
                    <div class="c_cur">
                        <input id="availableTime" class="layui-input" autocomplete="off" placeholder="上市时间">
                    </div>

                    <div class="c_cur">
                        <div class="submit_d">
                            <button type="button" class="layui-btn vb3 cb2" style="width: 150px;">发布产品</button>
                        </div>

                    </div>

                </div>
            </div>
            <div class="table_content"></div>
        </div>
    </div>
<script src="/static/layui/layui.js"></script>
<script src="/static/js/jquery-2.2.2.min.js"></script>
<script src="/static/js/left.js"></script>
   <script src="/static/chosen/chosen.jquery.js"></script>
<script>
    function handleMaskClick(name,e){
        console.log(name)
        $(e).parent().remove();
    }

    $(function (){
        $('#upload_img').click(function (){
            $('#ID-upload-demo-btn-2').click();
        });
    })


    $(".chosen-select").chosen({disable_search_threshold: 10,width:"100%"});



    layui.use(function(){
        var upload = layui.upload;
        var layer = layui.layer;
        var element = layui.element;
        var $ = layui.$;
        // 单图片上传
        var uploadInst = upload.render({
            elem: '#ID-upload-demo-btn',
            url: '', // 实际使用时改成您自己的上传接口即可。
            before: function(obj){
                // 预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#ID-upload-demo-img').attr('src', result); // 图片链接（base64）
                });

                element.progress('filter-demo', '0%'); // 进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            },
            done: function(res){
                // 若上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                // 上传成功的一些操作
                // …
                $('#ID-upload-demo-text').html(''); // 置空上传失败的状态
            },
            error: function(){
                // 演示失败状态，并实现重传
                var demoText = $('#ID-upload-demo-text');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            },
            // 进度条
            progress: function(n, elem, e){
                element.progress('filter-demo', n + '%'); // 可配合 layui 进度条元素使用
                if(n == 100){
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });
        // 多图片上传
        upload.render({
            elem: '#ID-upload-demo-btn-2',
            url: '', // 实际使用时改成您自己的上传接口即可。
            multiple: true,
            before: function(obj){
                // 预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    let html = '<div class="image-container">\n' +
                                '<img src="'+ result +'" alt="'+ file.name +'" >\n' +
                                '<div class="mask" onclick="handleMaskClick(\''+ file.name +'\',this)"><span>x</span></div>\n' +
                                '</div>';

                    $('#upload_img').before(html)
                });
            },
            done: function(res){
                // 上传完毕
                // …
            }
        });

        var laydate = layui.laydate;
        laydate.render({
            elem: '#availableTime',
            theme: '#276040'
        });

    });

</script>
</body>
</html>